<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" size="medium">
      <div style="display: flex">
        <el-form-item label="工单单别" prop="orderType">
          <el-input
            @change="form.planId = ''"
            clearable
            v-model="form.orderType"
            style="width: 100px"
          />
        </el-form-item>
        <el-form-item label="工单单号" prop="workOrderNo">
          <el-input
            @change="form.planId = ''"
            clearable
            v-model="form.workOrderNo"
            style="width: 230px"
          />
        </el-form-item>
      </div>
      <el-form-item label="排产序号" prop="planId">
        <el-select
          clearable
          v-model="form.planId"
          placeholder="排产序号"
          @focus="planFocus"
          style="width: 300px; margin-right: 15px; margin-top: 7px"
        >
          <el-option
            :value="item.planId"
            :label="item.planNo"
            v-for="(item, index) in this.planlist"
            :key="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文档上传">
        <el-upload
          class="avatar-uploader"
          action="http://192.168.3.11:8086/technologyFile"
          :on-success="handlePdfSuccess"
          :on-remove="removePdf"
          :on-change="pdfRemove"
          :headers="getHttpHeader"
          :before-upload="beforeFilsUpload"
        >
          <!-- <img v-if="form.img" :src="form.img" class="avatar"> -->
          <!-- object标签用于包含对象，比如图像、音频、视频、java applets、ActiveX、PDF以及Flash -->
          <object
            v-if="form.img"
            :data="form.img"
            type="application/pdf"
            width="420px"
            height="600px"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">添加</el-button>
        <el-button type="primary" @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getOrderList, logisticsIns } from "../../api/productionPlan";
export default {
  name: "logisticsPdf",
  data() {
    return {
      planlist: [],
      form: {
        orderType: "",
        workOrderNo: "",
        planId: "",
        img: "", //指导PDF文件的链接
      },
      getHttpHeader: {
        //上传文件的头
        Authorization: "", //传输文件的token
        CHECK_USER_VALUE: "GOLWAY",
        CHECK_PASSWORD_VALUE: "8D4DD3F80CEB6149329FDBD590B164F1",
      },
    };
  },
  methods: {
    // 表单上传函数
    async submitForm() {
        if (!this.form.orderType || !this.form.workOrderNo) return this.$message.error("工单单别或单号不能为空");
        if(!this.form.planId) return this.$message.error("计划批号不能为空");
        if(!this.form.img) return this.$message.error("文件不能为空");
      const query = Object.assign({}, this.form);
      const data = await logisticsIns(query);
      const errMsg = data.msg;
      if (data.code == "1") {
        this.$message({
          type: "success",
          message: errMsg,
        });
      } else {
        this.$message({
          type: "warning",
          message: errMsg,
        });
      }
    },
    // 重置
    resetForm() {
        this.form = {
        orderType: "",
        workOrderNo: "",
        planId: "",
        img: "", //指导PDF文件的链接
      }
    },
    // 获取计划批号
    async planFocus() {
      if (!this.form.orderType || !this.form.workOrderNo) return this.$message.error("工单单别或单号不能为空");
      let query = {
        orderType: this.form.orderType,
        workOrderNo: this.form.workOrderNo,
        page: 1,
        limit: 1000,
      };
      console.log(query);
      const res = await getOrderList(query);
      console.log(res);
      this.planlist = res.data.records;
    },
    // 文件上传之前的函数，将token传入头中
    beforeFilsUpload(file) {
      this.getHttpHeader.Authorization = this.dealCookie();
    },
    // cookies的处理函数
    dealCookie() {
      const strcookie = document.cookie; //获取cookie字符串
      const arrcookie = strcookie.split("; "); //分割
      for (var i = 0; i < arrcookie.length; i++) {
        const arr = arrcookie[i].split("=");
        if (arr[0] == "agent_Authorization") {
          return arr[1];
        }
      }
      return "";
    },
    // 上传PDF文档成功回调函数
    handlePdfSuccess(response) {
      this.form.img = response.results;
      console.log(11,this.form.img);
    },
    // 移除pdf
    async removePdf(file) {
      return (this.form.img = "");
      const { data } = await deleteFiles({ image: this.form.img });
      this.form.img = "";
      console.log(file, "removePdf");
    },
    pdfRemove(e) {
      console.log(e);
      if (e.status == "fail") return this.$message.error("文件上传失败!");
      else if (e.status == "success")
        return this.$message.success("文件上传成功!");
    },
  },
};
</script>

<style></style>